import { Engine } from '@babylonjs/core/Engines/engine';
import { IUIContainerToolOptions, UIContainerTool } from 'babylon-lib/highly-coupled-component/gui-tool/ui-container-tool';
import { CreateUINode, UINode } from 'babylon-lib/gui/base/ui-node';
import { Stage, Vector3 } from 'babylon-lib/index';
import { DefaultStage } from '../stages/default-stage';
import { CreateUIButton } from 'babylon-lib/gui/control/ui-button';
import { Vector2 } from '@babylonjs/core/Maths/math';
import { Debug } from 'babylon-lib/gui/control/debug';
import { CreateUIRectangle } from 'babylon-lib/gui/control/ui-rectangle';
import { CreateUIText } from 'babylon-lib/gui/control/ui-text';
import { CreateUICheckbox } from 'babylon-lib/gui/control/ui-checkbox';
import { CreateUISlider } from 'babylon-lib/gui/control/ui-slider';
import { CreateUIToggle } from 'babylon-lib/gui/control/ui-toggle';
import { CreateUIRadio } from 'babylon-lib/gui/control/ui-radio';
import { CreateUIInput, UIInput } from 'babylon-lib/gui/control/ui-input';
import { CreateUIRadioGroup } from 'babylon-lib/gui/control/ui-radio-group';
import { ANCHOR } from 'babylon-lib/gui/control/abstract-base';
import { CreateUICheckboxGroup } from 'babylon-lib/gui/control/ui-checkbox-group';
import { CreateUIColorPicker } from 'babylon-lib/gui/control/ui-color-picker';
import { CreateUISelectGrid } from 'babylon-lib/gui/control/ui-select-grid';
import { CreateUISelectGridGroup } from 'babylon-lib/gui/control/ui-select-grid-group';
import * as Data from '../data/data';



class MainStageUI extends UIContainerTool {

    private _input!: UIInput;
    private _input2!: UIInput;

    protected initializeStyle(options: IUIContainerToolOptions): IUIContainerToolOptions {
        const style = super.initializeStyle(options);

        style.isProduction = Data.isProduction.value;
        style.tableTitles = ['选项A', '选项B', '选项AB'];
        style.selectedTitle = '';
        style.useXR=true;
        style.useDefaultXRBoot=true;

        return style;
    }

    protected initializeCenterBottomPanelNode(engine: Engine, stage: Stage, style: IUIContainerToolOptions): UINode[] {
        return [
            this.initializeTable1Panel(engine, stage, style),
            this.initializeTable2Panel(engine, stage, style),
            this.initializeTable3Panel(engine, stage, style),
        ];
    }

    private initializeTable1Panel(engine: Engine, stage: Stage, style: IUIContainerToolOptions): UINode {
        const node = CreateUINode('table-1-panel', stage.uiScene,
            {
                key: style.tableTitles![0],
                anchor: new Vector3(0.5, 1, 0),
                lockToCamera: true,
                offset: new Vector3(0, 0.085, 0),
                display:style.tableTitles![0]===style.selectedTitle,
            },
            [
                CreateUIRectangle('table-1-panel-background', stage.uiScene, {
                    renderingGroupId:2, background: '#000000', alpha: 0.5, anchor: ANCHOR.CENTER_BOTTOM, width: 8, height: 1, cornerRadius: 5, depth: 0.005,
                }),
                this._input2 = CreateUIInput('test-input2', stage.uiScene,
                    {renderingGroupId:3, width: 2.5, height: 0.8, top: 0.05, left: -0.23, inputWidth: 85, alpha: style.alpha, titleColor: '#ffffff', fontSize: style.fontSize, title: '输入:', defaultValue: 'aa' },
                    (value: string | number) => {
                        Debug.log('input2:', value);
                    }
                ),
                CreateUIColorPicker('color-picker', stage.uiScene,
                    {
                        left: -0.06,
                        top: 0.05,
                        renderingGroupId:3,
                        autoLayout: true,
                        isVertical: false,
                        spacing: 0.02,
                        titleOffset: new Vector2(0, 0),
                        anchor: ANCHOR.LEFT_CENTER,
                        color: '#0ff000',
                        headerOptions: { text: '标题:', fontColor: '#ffffff', left: -0.36, width: 1.2, height: 0.6, alpha: 0.7 },
                        itemsOptions: [
                            { key: 'optionA', background: '#ff0000', height: 0.4, left: -0.18, alpha: 0.7 },
                            { key: 'optionB', background: '#0ff000', height: 0.4, left: 0, alpha: 0.7 },
                            { key: 'optionC', background: '#f0ff00', height: 0.4, left: 0.18, alpha: 0.7 },
                            { key: 'optionD', background: '#00f0f0', width: 0.4, left: 0.18, alpha: 0.7 },
                            { key: 'optionE', background: '#0000ff', width: 0.4, left: 0.18, alpha: 0.7 },
                        ]
                    },
                    (color: string) => {
                        Debug.log('color-picker:', color);
                    }
                ),
            ]
        );
        this._input2.useKeyboard(this.keyboard);
        return node;
    }

    private initializeTable2Panel(engine: Engine, stage: Stage, style: IUIContainerToolOptions): UINode {
        const node = CreateUINode('table-2-panel', stage.uiScene,
            {
                key: style.tableTitles![1],
                anchor: new Vector3(0.5, 1, 0),
                lockToCamera: true,
                offset: new Vector3(0, 0.085, 0),
                display:style.tableTitles![1]===style.selectedTitle,
            },
            [
                CreateUIRectangle('table-2-panel-background', stage.uiScene, {
                    renderingGroupId:2, background: '#000000', alpha: 0.5, anchor: ANCHOR.CENTER_BOTTOM, width: 8, height: 1.8, cornerRadius: 5, depth: 0.003
                }),
                this._input = CreateUIInput('test-input', stage.uiScene,
                    {renderingGroupId:3, width: 2.5, height: 0.8, top: 0.05, left: -0.24, title: '输入:', alpha: style.alpha, titleColor: '#ffffff', fontSize: style.fontSize, defaultValue: 3.14, isNumber: true },
                    (value: string | number) => {
                        Debug.log('input:', value);
                    }
                ),
                CreateUISelectGridGroup('select-grid-group', stage.uiScene,
                    {
                        left: -0.15,
                        top: 0.05,
                        renderingGroupId:3,
                        autoLayout: true,
                        isVertical: false,
                        spacing: 0.02,
                        multipleSelection: false,
                        anchor: ANCHOR.LEFT_CENTER,
                        selectedValue: ['optionA', 'optionC'],
                        headerOptions: { text: '标题:', fontSize: style.fontSize, fontColor: '#ffffff', left: -0.36, width: 1, height: 0.6, alpha: style.alpha },
                        itemsOptions: [
                            { key: 'optionA', text: 'op1', width: 1.2, height: 0.6, alpha: style.alpha, borderThickness: 3, fontSize: style.fontSize },
                            { key: 'optionB', text: 'op2', width: 1.2, height: 0.6, alpha: style.alpha, borderThickness: 3, fontSize: style.fontSize },
                            { key: 'optionC', text: 'op3', width: 1.2, height: 0.6, alpha: style.alpha, borderThickness: 3, fontSize: style.fontSize },
                        ]
                    },
                    (values: string[]) => {
                        Debug.log('select-grid-group:', values);
                    }
                ),
                CreateUISlider('test-slider', stage.uiScene,
                    {renderingGroupId:3, left: -0.14, top: 0.13, width: 4.5, spacing: 15, height: 0.8, title: '测试:', value: 6, unit: 'N', range: [2, 10], step: 0.1, sliderWidth: 150, fontColor: '#ffffff', alpha: style.alpha },
                    (value: number) => {
                        Debug.log('slider:', value);
                    }
                ),
                CreateUISelectGrid('select-grid', stage.uiScene,
                    {renderingGroupId:3, text: '选中', left: 0.25, top: 0.13, width: 1.1, height: 0.7, cornerRadius: 5, borderThickness: 3, alpha: style.alpha, fontSize: style.fontSize },
                    (isSelected: boolean) => {
                        Debug.log('select-grid:', isSelected);
                    }
                ),
            ]
        );
        this._input.useKeyboard(this.keyboard);
        return node;
    }

    private initializeTable3Panel(engine: Engine, stage: Stage, style: IUIContainerToolOptions): UINode {
        const node=CreateUINode('table-3-panel',stage.uiScene,
            {
                key:style.tableTitles![2],
                anchor:new Vector3(0.5,1,0),
                lockToCamera:true,
                offset:new Vector3(0,0.085,0),
                display:style.tableTitles![2]===style.selectedTitle,
            },
            [
                CreateUIRectangle('test-rectangle', stage.uiScene,
                    {renderingGroupId:2, width: 10, height: 2.3, background: '#000000', depth: 0.001, cornerRadius: 5, alpha: 0.5, anchor: ANCHOR.CENTER_BOTTOM }
                ),
                CreateUIButton('test-button-1', stage.uiScene,
                    {renderingGroupId:3, text: '测试1', width: 1.6, height: 0.6, left: -0.37,top:0.06, cornerRadius: 5,fontSize:style.fontSize ,alpha:style.alpha},
                    () => {
                        Debug.log('click btn 1');
                    }
                ),
                CreateUICheckboxGroup('checkbox-group', stage.uiScene,
                    {
                        left: -0.25,
                        top: 0.06,
                        autoLayout: true,
                        isVertical: false,
                        spacing: 0.02,
                        renderingGroupId:3,
                        anchor: ANCHOR.LEFT_CENTER,
                        checkedValue: ['optionA', 'optionC'],
                        headerOptions: { text: '标题:', left: -0.36, width: 1.2, height: 0.6,fontSize:style.fontSize,fontColor:'#ffffff',alpha:style.alpha },
                        itemsOptions: [
                            { key: 'optionA', title: 'op1', width: 1.1, height: 0.6 ,fontColor:'#ffffff',alpha:style.alpha,fontSize:style.fontSize},
                            { key: 'optionB', title: 'op2', width: 1.1, height: 0.6,fontColor:'#ffffff',alpha:style.alpha,fontSize:style.fontSize},
                            { key: 'optionC', title: 'op3', width: 1.1, height: 0.6,fontColor:'#ffffff',alpha:style.alpha,fontSize:style.fontSize},
                        ]
                    },
                    (values: string[]) => {
                        Debug.log('checkbox-group:', values);
                    }
                ),
                CreateUIRadioGroup('radio-group', stage.uiScene,
                    {
                        left: -0.05,
                        top: 0.16,
                        autoLayout: true,
                        isVertical: false,
                        spacing: 0.02,
                        renderingGroupId:3,
                        titleOffset: new Vector2(0.1, 0.05),
                        anchor: ANCHOR.LEFT_CENTER,
                        revocable: true,
                        checkedValue: 'optionA',
                        headerOptions: { text: '标题:', left: -0.36, width: 1.2, height: 0.6,fontSize:style.fontSize,fontColor:'#ffffff',alpha:style.alpha },
                        itemsOptions: [
                            { key: 'optionA', title: '选项1', width: 1.4, height: 0.6, fontSize:style.fontSize,fontColor:'#ffffff',alpha:style.alpha},
                            { key: 'optionB', title: '选项2', width: 1.4, height: 0.6,fontSize:style.fontSize,fontColor:'#ffffff',alpha:style.alpha},
                            { key: 'optionC', title: '选项3', width: 1.4, height: 0.6,fontSize:style.fontSize,fontColor:'#ffffff',alpha:style.alpha},
                        ]
                    },
                    (value: string | undefined) => {
                        Debug.log('radio-group:', value);
                    }
                ),
                CreateUIToggle('test-radio', stage.uiScene,
                    {renderingGroupId:3, left: 0.4, top: 0.06, width: 2, height: 0.8, title: '开关B', toggleSize: style.fontSize,fontSize:style.fontSize,fontColor:'#ffffff',alpha:style.alpha},
                    (isActive: boolean) => {
                        Debug.log('toggle:', isActive);
                    }
                ),
                CreateUIText('test-text', stage.uiScene,
                    {renderingGroupId:3, text: '测试文字AA,这是第一行\n分行显示?这是第二行', fontSize: style.fontSize, width: 3.7, height: 1, left: -0.26,top:0.17,alpha:style.alpha, fontColor: '#ffff00', fontWeight: 'bold' }
                ),
            ]
        );
        return node;
    }

}


export { MainStageUI };